记录下自己零基础学习htmlayout的过程
8, 文件选择器 和文件夹选择器
类似aardio里winform里面的fsys.dlg.openxxx , 弹出一个窗口让你选择要上传的文件或文件夹功能
文件选择器:<input type="file-path" filter="HTML files:*.htm,*.html;Text files:*.txt;All files:*.*" novalue="(select file)" value="" /> <br/> 文件夹选择:<inp记录下自己零基础学习htmlayout的过程
7, ICON图标的显示
这个是内置的behavior:shell-icon实现的, 不需要import任何库,编写html即可.
<select size="6" style="height:500px"> <option><img style="behavior: shell-icon;" filename=".png" /> *.png icon</option> <option><img记录下自己零基础学习htmlayout的过程
那么,右键菜单应该怎么做呢? 点击右键才能出现的菜单
看了htmlayout的示例,
selector函数的参数是指定右键菜单的CSS选择器
<div style="context-menu:selector(menu#context);">这里要点右键才出现菜单</div> <menu.context #context> <li id="i1">First item</li> <记录下自己零基础学习htmlayout的过程
菜单显示完成了, 那么怎么才能知道我点击了哪个呢?
和上面的button写法一样, 只需要把每个<li>加个id就可以了
记录下自己零基础学习htmlayout的过程
4, 多级菜单
记录下自己零基础学习htmlayout的过程
不推荐使用 , 推荐看12楼方法
刚才又到论坛里看了下, 弹出dropdown,官方推荐用 popup-menu ,这个是htmlayout内置的behavior,不需要导入其他库
记录下自己零基础学习htmlayout的过程
不推荐使用 , 推荐看12楼方法
上面有一个问题, 弹出来之后, 必须点击弹出区域外才能关闭弹出口, 在里面点击不会关闭
em.... aar官方论坛里有提到了,
记录下自己零基础学习htmlayout的过程
不推荐使用 , 推荐看12楼方法
3, 模拟菜单栏的弹出菜单功能
类似winform的菜单, 点击后,下拉出一个列表 ,
<div style="behavior:dropdown">菜单演示 <popup> <li>新记录下自己零基础学习htmlayout的过程
上面的方法只能简单的提示 , 如果你想要用要给复杂漂亮的提示框, 那么可以指定提示用的titleid,这个titleid指向下面定义的popup的id号即可.
记录下自己零基础学习htmlayout的过程
2, 增加提示
上面按键上怎么增加提示功能? 类似winform里的tooltips
第一种最简便的办法, 在div里面增加title属性, 这样htmlayout自动管理提示
<div #hello1 style="behavior:button" ti记录下自己零基础学习htmlayout的过程
其实上写到这里就可以看出, 上面利用onbuttonClick事件和press是不对的, 貌似实现了, 但是会有很多问题, 要实现长按功能, 就应该用类似plus的mouseup和mousedown事件
但是从教程里来看如果html里设置behavior:button定义为button, 那么就不会产生mouseup事件了, 经过测试也确实如此,
onMouseUp 和onMouseDown 事件是针对普通的节点, 官方论坛里也说过:
记录下自己零基础学习htmlayout的过程
我们知道工业上很多时候需要长按按钮来实现一定的功能, 比如数值连续增加, 那么这里应该怎么实现呢?
增加press功能, 这样鼠标在按钮上长按,就应该会数值自动增加了.
记录下自己零基础学习htmlayout的过程
如果按照上面的写法,每次判定if() 把所有的逻辑写在一起总感觉看着不是很合逻辑, 那么aardio里提供了另外一种写法, 类似写函数那样写成表函数的形式
记录下自己零基础学习htmlayout的过程
上面只是用到了一个button , 如果有两个
<div style="behavior:button">hello aardio1111!</div> <br /> <div style="behavior:button">hello aardio2222!</div>那么点击任何一个都会弹出窗口, 这显然不是我要的,
我要知道我点击了谁, 然后弹出不同的窗口.
那么需要在逻辑代码里输出看
记录下自己零基础学习htmlayout的过程
界面最重要的就是交互, 那么怎么才能我点击 hello aardio的字时候,弹出这个信息呢?
我们看了aardio官方教程知道, 有这么个交互behavior行为, 只需要定义代码块为这个button行为,那么点击它就会产生button的行为了.
于是,我们在main.aardio逻辑代码里添加
记录下自己零基础学习htmlayout的过程
1 , 新建htmlayout工程
首先建立 ui.aardio 的代码文件, 代码框架如下
<html> <head> <style type="text/css"> </style> </head> <body> hello aardio! </body> </html>那么,修改和添加main.aardio
记录下自己零基础学习htmlayout的过程
以前说了N多次要学习下htmlayout , 一直各种理由没开始, 这次下定决心开始好好的学一学.
为什么选择htmlayout? 不是过时了吗?
我不这样认为, 适合自己的才是最好的, 最先进的技术并不一定适合我, 我目前的工作和生活中winform这样的拖拖拽拽都可以胜任 , 接触更多的是工业级的软件, 不像web那样的应用层, 工业级的设计讲究的是效率和稳定.
适不适合还是因人而异. ,哈
既然名字都包含了html那么需要的就是html的语法了, 我从来没弄过web方面的, 所以真的是白的不能再白